<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - ￥{{ product.price }}
        <button @click="addToCart(product)">+</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      products: [
        { id: 1, name: '手机', price: 1000, quantity: 1 },
        { id: 2, name: '电脑', price: 2000, quantity: 1 },
        { id: 3, name: '键盘', price: 200, quantity: 2 }
      ]
    };
  },
  methods: {
    ...mapMutations(['addToCart'])
  }
};
</script>
